<!-- 商家分布图表 -->
<template>
  <div class='com-container' @dblclick="revertMap">
    <div class='com-chart' ref='map_ref'></div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

import axios from "axios";
// 将省份名称转为拼音的工具脚本
import { getProvinceMapInfo } from "@/utils/map_utils.js"

export default {
  data () {
    return {
      chartInstance: null,
      allData: null,
      mapData: {}, // 省份缓存数据
    }
  },
  mounted () {
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  destroyed () {
    window.removeEventListener('resize', this.screenAdapter)
  },
  computed:{
    ...mapState(['theme'])
  },
  watch:{
    theme(){
      console.log("主题切换了");
      this.chartInstance.dispose(); // 销毁当前的图表
      this.initChart(); // 以新主题切换图表对象
      this.screenAdapter(); // 完成屏幕适配
      this.updateChart(); // 更新图表展示
    }
  },
  methods: {
    async initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.map_ref, this.theme);

      // 获取中国地图的矢量数据
      const ret = await axios.get("http://localhost:8999/static/map/china.json");
      this.$echarts.registerMap('china', ret.data);
      const initOption = {
        title:{
          text: "| 商家分布",
          left:20,
          top:20
        },
        geo:{ // 地图配置
            type:'map', // 地图类型
            map: 'china', // 地图矢量数据
            top: "5%",
            bottom: "5%",
            itemStyle: { 
              areaColor:'#2172BF', // 地图板块颜色
              borderColor: "#333", // 省份间隔颜色
            }
        },
        legend: {
          left:'5%',
          bottom: "5%",
          orient: 'vertical', // 图例垂直排布
        }
      };

      this.chartInstance.setOption(initOption);
      this.chartInstance.on("click", async (arg)=>{
        // console.log("地图被点击了...");
        // console.log(arg); // arg.name 点击的省份
        const provinceInfo = getProvinceMapInfo(arg.name);
        // console.log(provinceInfo); // {key:省份拼音,path:对应省份数据文件路径}

        // 判断当前请求省份数据是否有缓存
        if(!this.mapData[provinceInfo.key]){
          const ret = await axios.get("http://localhost:8999" + provinceInfo.path);
          // 缓存省份数据
          this.mapData[provinceInfo.key] = ret.data;
          // console.log(ret);
          // 将点击省份地图数据注册到echarts对象中
          this.$echarts.registerMap(provinceInfo.key, ret.data);
        }
        
        const changeOption = { // 切换地图
          geo: { // 显示点击省份地图
            map: provinceInfo.key 
          }
        }
        this.chartInstance.setOption(changeOption);
      })
    },
    async getData () {
      // 获取服务器的数据, 对this.allData进行赋值之后, 调用updateChart方法更新图表
      const { data: ret } = await this.$http.get('map')
      this.allData = ret
      console.log(this.allData)
      this.updateChart()
    },
    updateChart () {
      // 图例的数据
      const legendArr = this.allData.map(item => {
        return item.name
      })

      // 处理图表需要的数据
      const seriesArr = this.allData.map(item => {
        // 所return的对象, 代表一个类别下的所有散点数据
        // 如果想在地图中显示散点数据, 所以我们需要给散点的图表增加一个配置 coordinateSystem:geo
        return {
          type: 'effectScatter',
          rippleEffect: { // 散点图涟漪效果
            scale:5, // 涟漪程度
            brushType: 'stroke', // 空心涟漪效果
          },
          name: item.name,
          data: item.children,
          coordinateSystem: 'geo'
        }
      });
      const dataOption = {
        series:seriesArr,
        legend:{
          data: legendArr
        }
      };
      this.chartInstance.setOption(dataOption)
    },
    screenAdapter () {
      const titleFontSize = this.$refs.map_ref.offsetWidth / 100 * 3.6;

      const adapterOption = {
        title: {
          textStyle:{
            fontSize: titleFontSize
          }
        },
        legend: {
          itemWidth:titleFontSize / 2,
          itemHeight:titleFontSize / 2,
          itemGap:titleFontSize / 2, // 图例间隔
          textStyle:{
            fontSize:titleFontSize / 2,
          }
        }
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    },
    // 回到中国地图
    revertMap(){
      const revertOption = {
        geo:{
          map: 'china'
        }
      }

      this.chartInstance.setOption(revertOption);
    }
  }
}
</script>

<style lang='less' scoped>
</style>
